<template>
  <div id="main"></div>
</template>

<script>
import * as echarts from "echarts";
import { jwData } from "../../service/index";
export default {
  name: "echarts",
  data() {
    return {
      valueList1: [],
      dataList: [
      ],
    };
  },
  mounted() {
    this.wd();
  },
   created() {
    this.wd();
  },
  methods: {
    wd() {
      jwData().then((res) => {
        this.dataList = Object.values(res.data);
        const data = this.dataList;
         const dataListOne = data.map(function (item) {
          let arr = item.map(function (item) {
            const arr1 = item.la;
            return arr1;
          });
          return arr;
        })
        console.log(dataListOne[0],11111)
        const valueList = data.map(function (item) {
           let arr2 =item.map(function(item){
            const loa=Number(item.lo)
            const arr3 = [loa,item.cl]
            return arr3
          })
          return arr2;
        });
         console.log(valueList[0],22222)
        var chartDom = document.getElementById("main");
        var myChart = echarts.init(chartDom);
        var option;
        option = {
          xAxis: {
            type: "category",
            data: dataListOne[0],
          },
          yAxis: {
            min: -180,
            max: 180,
            interval: 90,
            type: "value",
          },
          series: [
            {
              data: valueList[0].map(function (item) {
                return item[0];
              }),
              type: "line",
              smooth: 0.5,
              symbol: "circle", 
              symbolSize: 6,
              itemStyle: {
                normal: {
                   color: function (param) {
                    if (valueList[0][param.dataIndex][1] == 0.000000000000330) {
                      return "green";
                    } else if (valueList[0][param.dataIndex][1] == 0.000000000000350) {
                      return "yellow";
                    } else if (valueList[0][param.dataIndex][1] == 0.000000000000320) {
                      return "orange";
                    } else {
                      return "red";
                    }
                  },
                  lineStyle: {
                    color: "white",
                  },
                },
              },
            },
          ],
        };
        option && myChart.setOption(option);
      },
    )},
},
}

</script>

<style lang="scss" scoped>
#main {
  width: 100%;
  height: 100%;
}
</style>